<!-- 用户反馈问题配置 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row type="flex" justify="space-between" :gutter="48">
                    <a-col :md="16">
                    </a-col>
                    <a-col :md="8">
                        <a-form-item >
                            <a-button style="margin-left: 20px" type="primary" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="false" size="small">
            <div slot="userId" slot-scope="userId,record">
                <div>{{userId}}/{{record.phone}}</div>
            </div>
            <div slot="imgUrl" slot-scope="imgUrl">
                <div v-if="imgUrl">
                    <img @click="showImg(imgUrl)" style="width: 120px;height: 60px;margin-right: 10px;display: inline-block;" :src="imgUrl.split(',')[0]" alt="">
                </div>
                <div v-else>-</div>
            </div>
            <div slot="complaintStatus" slot-scope="complaintStatus">
                <div v-for="(item,i) in complaintStatusList" :key="i">
                    <a-tag v-if="item.id == complaintStatus" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="showDetail(record,'0')">预览</a-button>
                    <a-button type="link" @click="showDetail(record,'1')">回复</a-button>
                </div>
            </template>
            <div slot="isLike" slot-scope="isLike,record">
                <div v-if="record.administrator">客服ID：{{record.administrator}} <a-icon type="heart" v-if="isLike == '1'" :style="{ color: 'red' }" theme="filled"/></div>
                <div>{{record.followTime}}</div>
            </div>
        </a-table>

        <!-- 查看预览 -->
        <a-modal
            title="反馈问题预览"
            :visible="visible"
            width="70%"
            :confirm-loading="confirmLoading"
            @ok="visible = false"
            @cancel="visible = false"
            >
            <div>
                <a-descriptions title="订单信息" bordered v-if="order.orderCode">
                    <a-descriptions-item label="商品信息" v-for="(goods,i) in order.goodsInfo" :key="i">{{goods.goodsName}}-{{goods.spec}}-{{goods.colorName}}-{{goods.grade}}</a-descriptions-item>
                    <a-descriptions-item label="订单号">{{order.orderCode}}</a-descriptions-item>
                    <a-descriptions-item label="交易金额">{{order.payAmount}}</a-descriptions-item>
                    <a-descriptions-item label="交易时间">{{order.paymentTime}}</a-descriptions-item>
                    <a-descriptions-item label="交易类型">{{order.paymentMethod}}</a-descriptions-item>
                    <a-descriptions-item label="订单状态"><span :style="`color: ${orderStatuss(order.orderStatus)[1]}`">{{orderStatuss(order.orderStatus)[0]}}</span></a-descriptions-item>
                    <a-descriptions-item label="用户ID">{{order.userId}}</a-descriptions-item>
                    <a-descriptions-item label="用户昵称">{{order.userName}}</a-descriptions-item>
                    <a-descriptions-item label="收货人" v-if="order.receivingAddressInfo">{{order.receivingAddressInfo.receiver}}-{{order.receivingAddressInfo.receiverPhone}}</a-descriptions-item>
                    <a-descriptions-item label="收货地址" v-if="order.receivingAddressInfo">{{order.receivingAddressInfo.province}}{{order.receivingAddressInfo.city}}{{order.receivingAddressInfo.area}}{{order.receivingAddressInfo.detailedAddress}}</a-descriptions-item>
                </a-descriptions>
                <br />
                <a-descriptions title="反馈内容" bordered>
                    <a-descriptions-item label="内容">{{item.question}}</a-descriptions-item>
                    <a-descriptions-item label="图片">
                        <div v-if="item.imgUrl">
                            <img @click="showImg(item.imgUrl)" v-for="img in item.imgUrl.split(',')" :key="img" style="width: 120px;height: 60px;margin-right: 10px;display: inline-block;" :src="img" alt="">
                        </div>
                        <div v-else>-</div>
                    </a-descriptions-item>
                </a-descriptions>
                <div v-if="item.userSubmitComplaintSuggestionsInfoDTOList">
                    <a-card v-for="itm in item.userSubmitComplaintSuggestionsInfoDTOList" :key="itm.id" style="margin: 20px 0;">
                        <div v-if="itm.replyPersonnel == '1'">客服回复：</div>
                        <div v-if="itm.replyPersonnel == '0'">用户回复：</div>
                        <div>{{itm.replyMsg}}</div>
                        <!-- <div>{{JSON.parse(itm.contentImgUrl)}}</div> -->
                        <div v-if="itm.contentImgUrl">
                            <img @click="showImg(itm.contentImgUrl)" v-for="img in itm.contentImgUrl.split(',')" :key="img" style="width: 120px;height: 60px;margin-right: 10px;display: inline-block;" :src="img" alt="">
                        </div>
                    </a-card>
                </div>
            </div>
        </a-modal>

        <!-- 添加、修改用户反馈问题配置 -->
        <a-modal
            title="反馈问题处理"
            :visible="replyVisible"
            width="70%"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="replyVisible = false"
            >
            <div>
                <a-descriptions title="订单信息" bordered v-if="order.orderCode">
                    <a-descriptions-item label="商品信息" v-for="(goods,i) in order.goodsInfo" :key="i">{{goods.goodsName}}-{{goods.spec}}-{{goods.colorName}}-{{goods.grade}}</a-descriptions-item>
                    <a-descriptions-item label="订单号">{{order.orderCode}}</a-descriptions-item>
                    <a-descriptions-item label="交易金额">{{order.payAmount}}</a-descriptions-item>
                    <a-descriptions-item label="交易时间">{{order.paymentTime}}</a-descriptions-item>
                    <a-descriptions-item label="交易类型">{{order.paymentMethod}}</a-descriptions-item>
                    <a-descriptions-item label="订单状态"><span :style="`color: ${orderStatuss(order.orderStatus)[1]}`">{{orderStatuss(order.orderStatus)[0]}}</span></a-descriptions-item>
                    <a-descriptions-item label="用户ID">{{order.userId}}</a-descriptions-item>
                    <a-descriptions-item label="用户昵称">{{order.userName}}</a-descriptions-item>
                    <a-descriptions-item label="收货人" v-if="order.receivingAddressInfo">{{order.receivingAddressInfo.receiver}}-{{order.receivingAddressInfo.receiverPhone}}</a-descriptions-item>
                    <a-descriptions-item label="收货地址" v-if="order.receivingAddressInfo">{{order.receivingAddressInfo.province}}{{order.receivingAddressInfo.city}}{{order.receivingAddressInfo.area}}{{order.receivingAddressInfo.detailedAddress}}</a-descriptions-item>
                </a-descriptions>
                <br />
                <a-descriptions title="反馈内容" bordered>
                    <a-descriptions-item label="内容">{{item.question}}</a-descriptions-item>
                    <a-descriptions-item label="图片">
                        <div v-if="item.imgUrl">
                            <img @click="showImg(item.imgUrl)" v-for="img in item.imgUrl.split(',')" :key="img" style="width: 120px;height: 60px;margin-right: 10px;display: inline-block;" :src="img" alt="">
                        </div>
                        <div v-else>-</div>
                    </a-descriptions-item>
                </a-descriptions>
                <div v-if="item.userSubmitComplaintSuggestionsInfoDTOList">
                    <a-card v-for="itm in item.userSubmitComplaintSuggestionsInfoDTOList" :key="itm.id" style="margin: 20px 0;">
                        <div v-if="itm.replyPersonnel == '1'">客服回复：</div>
                        <div v-if="itm.replyPersonnel == '0'">用户回复：</div>
                        <div>{{itm.replyMsg}}</div>
                        <!-- <div>{{JSON.parse(itm.contentImgUrl)}}</div> -->
                        <div v-if="itm.contentImgUrl">
                            <img @click="showImg(itm.contentImgUrl)" v-for="img in itm.contentImgUrl.split(',')" :key="img" style="width: 120px;height: 60px;margin-right: 10px;display: inline-block;" :src="img" alt="">
                        </div>
                    </a-card>
                </div>
                <!-- 标记处理 -->
                <br />
                <a-row :gutter="48">
                    <a-col :md="2" :sm="12">
                        <div class="">
                            <a-date-picker v-model="followTime" id="" format="YYYY-MM-DD HH:mm:ss" show-time valueFormat="YYYY-MM-DD hh:mm:ss" >
                                <a-tag color="#ddd" style="padding: 5px 7px;border-radius: 5px"><a-icon type="history" style="color: #000;font-size: 20px" /></a-tag>
                            </a-date-picker>
                        </div>
                    </a-col>
                    <a-col :md="2" :sm="12">
                        <a-popover v-model="popoverVisible" title="选择客服" trigger="click" placement="right">
                            <div slot="content" >
                                <a-select style="width: 100%" v-model="administrator" placeholder="请选择" allowClear>
                                    <a-select-option v-for="(item,i) in roleList" :key="i" :value="item.userId">{{item.userId}}</a-select-option>
                                </a-select>
                            </div>
                            <a-tag color="#ddd" style="padding: 5px 7px;border-radius: 5px"><a-icon type="user" style="color: #000;font-size: 20px" /></a-tag>
                        </a-popover>
                    </a-col>
                    <a-col :md="2" :sm="12">
                        <a-tag @click="selIsLike" color="#ddd" style="padding: 5px 7px;border-radius: 5px"><a-icon v-if="isLike == '1'" type="heart" style="color: red;font-size: 20px" theme="filled"/><a-icon v-else type="heart" style="color: #000;font-size: 20px" /></a-tag>
                    </a-col>
                </a-row>
                <br />
                <a-row :gutter="48">
                    <a-col :md="6" :sm="12">
                        <div>{{followTime}}</div>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <div v-if="administrator">客服ID：{{administrator}}</div>
                    </a-col>
                </a-row>
                <a-descriptions title="内容" >
                    <div>
                        <a-textarea v-model="content" placeholder="回复内容" :auto-size="{ minRows: 3, maxRows: 5 }" />
                    </div>
                </a-descriptions>
                <a-descriptions title="图片" >
                    <div class="clearfix">
                            <a-upload
                            list-type="picture-card"
                            :file-list="fileList"
                            @preview="handlePreview"
                            @change="handleChange"
                            >
                            <div v-if="fileList.length < 5">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">
                                    选择图片
                                </div>
                            </div>
                            </a-upload>
                            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                <img alt="example" style="width: 100%" :src="previewImage" />
                            </a-modal>
                        </div>
                </a-descriptions>
            </div>
        </a-modal>

         <!-- 上传图片预览 -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <!-- 表格图片预览 -->
        <a-modal :visible="previewImgVisible" :footer="null" @cancel="previewImgVisible = false">
            <a-carousel autoplay dots-class="slick-dots slick-thumb" style="margin-bottom:60px">
                <div v-for="(img,i) in showImgs" :key="i">
                    <img :src="img" alt=""/>
                </div>
                <a slot="customPaging" slot-scope="props">
                    <img :src="getImgUrl(props.i)" />
                </a>
            </a-carousel>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { queryUserComplaintSuggestions , updateUserComplaintSuggestions } from '@/api/brand';
import { queryGoodsOrder } from '@/api/mall/order';
import { queryRoleUser , queryRoleName } from '@/api/power';
import { getBase64 , fileProcess } from '@/utils/util';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandList: [],
            dataList: [],
            total: 0,
            page: 1,
            size: 10,
            item: {
                id: '',
                tagName: '', // 问题类型
                answer: '', // 问题回复
                status: '',
            },
            complaintStatusList: [
                {id: 1, name: '待受理'},{id: 2, name: '待回复'},{id: 3, name: '待跟进'},{id: 4, name: '已回复'},{id: 5, name: '已完成'},
            ],
            confirmLoading: false,
            isload: false,
            visible: false,
            columns,
            drawerVisible: false,
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            commentIdList: [],
            previewImgVisible: false,
            showImgs: [],
            order: {},
            replyVisible: false,
            followTime: '', // 标记时间
            isLike: '', // 是否标记
            popoverVisible: false,
            administrator: undefined,
            roleList: [],
            content: '', // 回复内容
            fileList: [],
            previewVisible: false,
            previewImage: '',
        };
    },
    async created(){
        try {
            this.getData()
            this._queryRoleName();
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'page':_this.page - 1,
                'size':_this.size,
            }
            queryUserComplaintSuggestions(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 确定添加、修改反馈回复
        handleOk(){
            let _this = this
            console.log(_this.followTime,'followTime')
            _this.confirmLoading = true
            const formData = new FormData();
            formData.append('id',_this.item.id);
            if(_this.administrator){
                formData.append('administrator',_this.administrator)
            };
            if(_this.content != ''){
                formData.append('content',_this.content);
            }
            // formData.append('followTime',_this.followTime);
            for (let index = 0; index < _this.fileList.length; index++) {
                const item = _this.fileList[index];
                formData.append('contentImg',item.originFileObj)
            }
            updateUserComplaintSuggestions(formData)
            .then(res => {
                _this.confirmLoading = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '回复成功',
                        duration: 8,
                    })
                    _this.replyVisible = false;
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 删除
        del(item){
            let _this = this
            const params = {
                'brandId':item.brandId,
                'id':item.id,
                'isDelete':1,
            }
            updateUserComplaintSuggestions(params)
            .then(res=>{
                if(res.success){
                    _this.visible = false
                    _this.getData()
                    _this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 预览图片
        showImg(imgs){
            if(imgs){
                this.showImgs = imgs.split(',')
                console.log(this.showImgs,'imgs')
                this.previewImgVisible = true
            }
        },
        getImgUrl(i){
            return this.showImgs[i]
        },
        // 获取商品订单详情信息
        _getGoodsOrder(orderCode){
            let _this = this;
            return new Promise((resolve,reject) => {
                const params = {
                    'brandId':_this.brandId,
                    'orderCode':orderCode,
                }
                queryGoodsOrder(params)
                .then(res => {
                    if(res.success){
                        if(res.data.content.length > 0){
                            resolve(res.data.content);
                        }else{
                            resolve([])
                        }
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        orderStatuss(val){
            if(val==0){
                return ['待付款','#ffd333']
            }else if(val==1){
                return ['待发货','#ffd333']
            }else if(val==2){
                return ['待收货','#ffd333']
            }else if(val==3){
                return ['待评价','#ffd333']
            }else if(val==4){
                return ['已完成','#87d068']
            }else if(val==5){
                return ['已取消','#f5222d']
            }else if(val==6){
                return ['已关闭','#f5222d']
            }else if(val==7){
                return ['退款中','#ffd333']
            }else if(val==8){
                return ['退款成功','#87d068']
            }else if(val==9){
                return ['退货中','#ffd333']
            }else if(val==10){
                return ['退货成功','#87d068']
            }
        },
        // 预览反馈信息
        async showDetail(item,type){
            this.item = JSON.parse(JSON.stringify(item));
            let _this = this;
            try {
                if(item.orderCode){
                    var order = await this._getGoodsOrder(item.orderCode);
                    if(order.length > 0){
                        var goods = order[0];
                        goods.goodsInfo = JSON.parse(goods.goodsInfo)
                        goods.receivingAddressInfo = JSON.parse(goods.receivingAddressInfo)
                        console.log(goods,'goods')
                        this.order = goods;
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: '暂未获取到订单信息',
                            duration: 8,
                        })
                    }
                }else{
                    this.order = {};
                }
            } catch (error) {
                _this.$notification['error']({
                    message: '提示',
                    description: error,
                    duration: 8,
                })
            }
            if(type == '0'){
                this.visible = true;
            }else{
                this.administrator = undefined;
                this.content = ''
                this.isLike = item.isLike
                this.followTime = ''
                this.fileList = []
                this.replyVisible = true;
            }
            
        },
        // 是否标记
        selIsLike(){
            let _this = this;
            this.isLike = this.isLike == '1' ? '0' : '1'
            const formData = new FormData();
            formData.append('id',_this.item.id);
            formData.append('isLike',_this.isLike);
            updateUserComplaintSuggestions(formData)
            .then(res => {
                _this.confirmLoading = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: this.isLike == '1' ? '标记成功' : '取消标记',
                        duration: 8,
                    })
                    _this.replyVisible = false;
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 查询角色名称
        _queryRoleName(){
            let _this = this;
            const params = {
                'roleName': '客服',
                'page': 0,
                'size': 99,
            }
            queryRoleName(params)
            .then(res => {
                if(res.success){
                    if(res.data.content.length > 0){
                        var roleId = res.data.content[0].id;
                        _this._queryRoleUser(roleId)
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 获取已设置的客服人员
        _queryRoleUser(roleId){
            let _this = this;
            const params = {
                'roleId': roleId,
                'page': 0,
                'size': 99,
            }
            queryRoleUser(params)
            .then(res => {
                if(res.success){
                    _this.roleList = res.data.content;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleChange({ fileList }) {
            this.fileList = fileList;
        },
        handleCancel() {
            this.previewVisible = false;
        },
    }
}

</script>
<style scoped>
td{
    width: 140px;
    height: 30px;
}
.green{
    color: #87d068;
}
.imgUrl{
    width: 180px;
    height: 100px;
}
.ant-carousel >>> .slick-slide img {
    text-align: center;
    height: 300px;
    line-height: 300px;
    background: #364d79;
    overflow: hidden;
    width: 100%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -15px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}

.timeSelDom{
    position: relative;
}
#datePick{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
}
</style>